<template>
  <div class="dc-color-picker sa-flex">
    <img class="empty" src="/static/images/shop/decorate/picker.png" />
    <el-color-picker v-model="color" @change="changeColor" />
    <el-input v-model="color" @input="changeColor"></el-input>
    <el-checkbox
      v-if="isShow"
      class="sa-m-l-16"
      v-model="flag"
      :true-label="1"
      :false-label="0"
      @change="changeShow"
    />
  </div>
</template>
<script>
  export default {
    name: 'dc-color-picker',
  };
</script>
<script setup>
  import { ref, watch } from 'vue';
  const emit = defineEmits(['update:modelValue', 'update:show']);
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    show: {
      type: Number,
      default: 0,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  });

  const color = ref(props.modelValue || '');
  watch(
    () => props.modelValue,
    () => {
      color.value = props.modelValue;
    },
  );

  function changeColor() {
    emit('update:modelValue', color.value ? color.value : '');
  }

  const flag = ref(props.show || '');
  watch(
    () => props.show,
    () => {
      flag.value = props.show;
    },
  );

  function changeShow() {
    emit('update:show', flag.value);
  }
</script>
<style lang="scss" scoped>
  .dc-color-picker {
    .empty {
      width: 32px;
      height: 32px;
      border-radius: 4px 0 0 4px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    :deep() {
      .el-color-picker__trigger {
        display: flex;
        padding: 0;
        border-radius: 4px 0 0 4px;
        border-right: none;
        overflow: hidden;
        .el-color-picker__color {
          border: none;
        }
        .el-color-picker__empty {
          display: none;
        }
      }
    }
    :deep() {
      .el-input {
        flex: 1;
        .el-input__wrapper {
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }
</style>
